<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/metro/easyui.css" rel="stylesheet" type="text/css">
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/icon.css" rel="stylesheet" type="text/css">
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.min.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/plugins/jquery.international.js" type="text/javascript"></script>
    <script src="/index/easyuiLanguagePack" type="text/javascript"></script>
    <script src="/index/languagePack/auth/user" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.const.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.formatter.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.ajax.js" type="text/javascript"></script>
    <script type="text/javascript">

        const userBaseUrl = "/api/auth/user";
        const searchUrl = userBaseUrl + "/list";
        const insertUrl = userBaseUrl + "/insert";
        const updateUrl = userBaseUrl + "/update";
        const deleteUrl = userBaseUrl + "/delete";
        // 数据表格id
        const gridId = "userGrid";
        // 数据表格查询表单id
        const searchFormId = "searchForm";
        // 菜单信息表单id
        const saveFormId = "saveForm";
        // 菜单信息编辑对话框id
        const dialogId = "userDialog";
        //决定执行用户更新还是插入
        let saveUrl;
        // 当前选中行
        let currentRow;
        let userSelectedRows;
        // 当前用户角色信息
        let currentUserRoles;

        let buttons = [
            {
                iconCls: 'icon-search',
                handler: search,
                text: langCommon.search
            }, {
                iconCls: 'icon-cancel',
                handler: resetSearchFrom,
                text: langCommon.resetConditions
            }, {
                iconCls: 'icon-add',
                handler: openUserAddDialog,
                text: langCommon.add
            }, {
                iconCls: 'icon-edit',
                handler: openUserModifyDialog,
                text: langCommon.edit
            }, {
                iconCls: 'icon-remove',
                handler: deleteUser,
                text: langCommon.delete
            }, {
                iconCls: 'icon-unlock',
                handler: enableUser,
                text: langCommon.active
            }, {
                iconCls: 'icon-lock',
                handler: disableUser,
                text: langCommon.locked
            }, {
                iconCls: 'reset_pwd',
                handler: resetPwd,
                text: lang.resetPwd
            }
        ];

        // 重置用户密码
        function resetPwd() {
            userSelectedRows = getSelections(gridId);
            if (userSelectedRows.length == 0) {
                euAlert(langCommon.info, lang.message.pleaseSelectData);
                return;
            }
            euConfirm(langCommon.info, lang.message.resetConfirm, resetPwdCallback);
        }

        function resetPwdCallback() {
            ajaxPostParamAndCallback("/api/auth/user/resetPassword", {userId: currentRow.userId}, function(){
                euShow(langCommon.info,lang.message.resetPwdSuccess);
                search();
            });
        }

        /**
         * 启用用户
         */
        function enableUser() {
            updateUserStatus("ACTIVE");
        }

        /**
         * 停用用户
         */
        function disableUser() {
            updateUserStatus("LOCKED")
        }

        /**
         * 更新用户状态
         * @param status
         */
        function updateUserStatus(status) {
            let params = {
                status:status,
                userId:currentRow.userId
            }
            ajaxPostBodyAndCallback(updateUrl, params, saveCallback);
        }

        function initUserGrid() {
            let columns = [[
                {field: 'account', title: lang.account, width: 100, align: 'left', sortable: true},
                {field: 'username', title: lang.username, width: 100, align: 'left', sortable: false},
                {field: 'roleName', title: lang.roleName, width: 100, align: 'left', sortable: false},
                {field: 'status', title: langCommon.status, width: 50, align: 'left', sortable: true, formatter:formatStatus},
                {field: 'createTime', title: langCommon.createTime, width: 100, align: 'left', formatter: formatDateTime, sortable: true},
                {field: 'updateTime', title: langCommon.updateTime, width: 100, align: 'left', formatter: formatDateTime, sortable: true},
            ]];
            initAndCallback(gridId, searchUrl, {}, columns, searchCallback);
        }

        // 查询数据
        function search() {
            let params = {
            };
            ajaxPostLoadWithFormAndCallback(searchFormId, gridId, searchUrl, params, searchCallback);
        }

        function searchCallback() {
            addButtons4pageTB(gridId, buttons);
        }

        // 删除数据
        function deleteUser() {
            userSelectedRows = getSelections(gridId);
            if (userSelectedRows.length == 0) {
                euAlert(lang.info, langCommon.message.selectDelDataMsg);
                return;
            }
            euConfirm(lang.info, langCommon.message.confirmDelMsg, deleteCallback);
        }

        function deleteCallback() {
            let params = {
                userId: userSelectedRows[0].userId
            };
            ajaxPostBodyAndCallback(deleteUrl, params, search);
        }



        // 打添加对话框
        function openUserAddDialog() {
            saveUrl = insertUrl;
            resetSaveFrom();
            euTextboxRemoteValidate("account", "/api/auth/user/checkAccount", "account", lang.message.accountAlreadyExist);
            openDialog(dialogId, langCommon.add);
        }

        // 打开编辑对话框
        function openUserModifyDialog() {
            saveUrl = updateUrl;
            resetSaveFrom();
            euTextboxRemoteValidate("account", "/api/auth/user/checkAccount", "account", lang.message.accountAlreadyExist,"&userId="+currentRow.userId);
            openDialogAndFillInFormWithRowData(dialogId, saveFormId, currentRow, langCommon.edit);
        }

        // 保存数据
        function saveUser() {
            if(!formValidate(saveFormId)){
                return;
            }
            let params = getFormData(saveFormId);
            ajaxPostBodyAndCallback( saveUrl, params, saveCallback);
        }

        function saveCallback() {
            search();
            closeUserSetDialog();
        }

        // 关闭对话框
        function closeUserSetDialog() {
            closeDialog(dialogId);
        }

        // 重置搜索表单数据
        function resetSearchFrom() {
            resetFrom(searchFormId);
        }

        // 重置菜单信息表单数据
        function resetSaveFrom() {
            resetFrom(saveFormId);
        }

        function onSelectRow(index, row) {
            currentRow = row;
        }

        function onDbClickRow(index, row){
            currentRow = row;
            openUserModifyDialog()
        }

        // 页面初始化
        $(function () {

            // token
            token = getCookie(TOKEN_KEY);

            // Search Form
            setText("searchAccountText", lang.account);
            setText("searchUsernameText", lang.username);
            setText("searchRoleText", lang.roleName);
            setText("searchStatusText", langCommon.status);
            setText("searchStatusActiveText", langCommon.active);
            setText("searchStatusLockedText", langCommon.locked);
            setText("searchStatusAllText", langCommon.all);

            // Edit Form
            setText("editAccountText", lang.account);
            setText("editFirstNameText", lang.firstName);
            setText("editLastNameText", lang.lastName);
            setText("editRoleText", lang.roleName);

            // Dialog Button
            setEuButtonText("saveBtn", langCommon.confirm);
            setEuButtonText("closeBtn", langCommon.back);

            initUserGrid();
            addKeyListener(13, search);

            remoteLoadCombobox("searchRoleComb","/api/auth/role/listCombobox","roleId","roleName");
            remoteLoadCombobox("roleId","/api/auth/role/listCombobox","roleId","roleName");

        });

    </script>
</head>
<body style="margin: 1px">
<table class="easyui-datagrid" data-options="
       pagePosition: 'top',
       fitColumns:true,
       pagination:true,
       singleSelect:true,
       fit:true,
       toolbar:'#tb',
       pageSize:40,
       onSelect:onSelectRow,
       onDblClickRow:onDbClickRow"
       id="userGrid">
</table>
<div id="tb">
    <form id="searchForm" method="post">
        <table cellspacing="2px">
            <tr>
                <td><b id="searchAccountText"></b></td>
                <td><input class="easyui-textbox" name="account" size="15"/><td>
                <td><b id="searchUsernameText"></b></td>
                <td><input class="easyui-textbox" name="username" size="15"/><td>
                <td><b id="searchRoleText"></b></td>
                <td><input class="easyui-combobox" id="searchRoleComb" name="roleId" size="15"/><td>
                <td><b id="searchStatusText"></b></td>
                <td>
                    <input type="radio" name="status" value="ACTIVE">
                    <span id="searchStatusActiveText"></span>
                    <input type="radio" name="status" value="LOCKED">
                    <span id="searchStatusLockedText"></span>
                    <input type="radio" name="status" value="" checked="checked">
                    <span id="searchStatusAllText"></span>
                </td>
            </tr>
        </table>
    </form>
</div>
<div buttons="#dlg-buttons" class="easyui-dialog" data-options="iconCls:'icon-edit',modal:true,closed:true"
     id="userDialog">

    <form id="saveForm" method="post">
        <table cellspacing="2px">
            <input hidden="true" name="userId"/>
            <tr>
                <td id="editAccountText" style="width: 100px"></td>
                <td><input class="easyui-textbox" id="account" name="account" required="true" style="width: 300px;"/></td>
            </tr>
            <tr>
                <td id="editFirstNameText"></td>
                <td><input class="easyui-textbox" name="firstName" required="true" style="width: 300px;"/></td>
            </tr>
            <tr>
                <td id="editLastNameText"></td>
                <td><input class="easyui-textbox" name="lastName" required="true" style="width: 300px;"/></td>
            </tr>
            <tr>
                <td id="editRoleText"></td>
                <td>
                    <input class="easyui-combobox" id="roleId" name="roleId" required="true" style="width: 300px;" />
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="dlg-buttons">
    <a class="easyui-linkbutton" href="javascript:saveUser()" iconCls="icon-ok" id="saveBtn"></a>
    <a class="easyui-linkbutton" href="javascript:closeUserSetDialog()" iconCls="icon-remove" id="closeBtn"></a>
</div>
<div buttons="#dlg-buttons2" class="easyui-dialog" closed="true"
     id="roleSetDialog" style="width:500px;height:350px;padding: 1px">
    <table class="easyui-datagrid" data-options="
    pagePosition: 'top',
    pagination:true,
    pageSize:40,
    fitColumns:true,
    fit:true,
    singleSelect:true" id="roleGrid">

    </table>
</div>
<div id="dlg-buttons2">
    <a class="easyui-linkbutton" href="javascript:saveRoleSet()" iconCls="icon-ok" id="saveRolesBtn"></a>
    <a class="easyui-linkbutton" href="javascript:closeRoleSetDialog()" iconCls="icon-no" id="closeRoleSetBtn"></a>
</div>
</body>
</html>